<template>
  <v-dialog persistent width="1000" v-model="loginSwitch" content-class="rounded-0">
    <v-container class="d-flex pa-0">
      <!-- 网站信息 -->
      <v-card dark height="560" width="500" tile class="pa-16 dialog_back d-flex align-start flex-column">
        <v-container class="mb-auto">
          <h1>ZHIFOU</h1>
          <p class="text-caption">全方位、全宇宙最牛逼的贺哥博客网站</p>
        </v-container>
        <v-container class="mb-auto">
          <v-avatar size="35">
            <img
                :src="recommendAuthor.head_pic"
                :alt="recommendAuthor.nickname"
                :title="recommendAuthor.nickname"
            >
          </v-avatar>
          <span class="text-caption ml-2">{{ recommendAuthor.nickname }}</span>
          <p class="text-caption mt-3" v-html="recommendAuthor.canvases"></p>
        </v-container>
        <v-container class="text-center">
          <v-chip small
                  label color="transparent"
          >
            <a target="_blank" class="grey--text">知否咨询</a>
          </v-chip>
          <v-chip small
                  label color="transparent"
          >
            <a target="_blank" class="grey--text">使用条款</a>
          </v-chip>
          <v-chip small
                  label color="transparent"
          >
            <a target="_blank" class="grey--text">帮助文档</a>
          </v-chip>
          <v-chip small
                  label color="transparent"
          >
            <a target="_blank" class="grey--text">关于我们</a>
          </v-chip>
        </v-container>
        <v-btn
            class="closeBtn"
            elevation="3"
            icon
            large
            absolute
            @click="closeDialog"
        >
          <v-icon class="grey--text">mdi-close-circle-outline</v-icon>
        </v-btn>
      </v-card>
      <v-card>
        <v-window
            eager
            v-model="window"
        >
          <!-- 登录窗口 -->
          <v-window-item value="login">
            <v-card height="560" width="500" tile class="pa-16">
              <div class="d-flex justify-space-between pa-2">
                <h2>登录</h2>
                <div class="text-caption mt-2">
                  没有账号?&nbsp;&nbsp;<a @click="switchWindow('register')">点击注册</a>
                </div>
              </div>
              <div>
                <v-form
                    class="pa-2"
                    ref="loginForm"
                    v-model="valid"
                    lazy-validation
                >
                  <v-text-field
                      dense
                      outlined
                      required
                      v-model="loginInfo.username"
                      :rules="rules.username"
                      label="用户名"
                      placeholder="请输入用户名"
                  ></v-text-field>

                  <v-text-field
                      dense
                      outlined
                      required
                      :type="isShowPassword ? 'password' : 'text'"
                      v-model="loginInfo.password"
                      :rules="rules.password"
                      label="密码"
                      placeholder="请输入密码"
                      :append-icon="isShowPassword ? 'mdi-eye' : 'mdi-eye-off'"
                      @click:append="togglePassword"
                  ></v-text-field>

                  <v-checkbox
                      dense
                      v-model="loginInfo.isCheck"
                      :rules="rules.isCheck"
                      label="同意本公司的条款与协议"
                      required
                  ></v-checkbox>

                  <v-btn
                      dense
                      block
                      :disabled="!valid"
                      color="success"
                      @click="validateLogin"
                  >
                    登录
                  </v-btn>
                </v-form>
                <p class="text-center mt-1"><a href="#" class="text-caption grey--text">忘记密码</a></p>
              </div>
              <div class="mt-12">
                <div class="d-flex align-center">
                  <v-divider/>
                  <span class="text-caption grey--text">其它登录的方式</span>
                  <v-divider/>
                </div>
                <div class="text-center mt-6">
                  <!-- 绑定多个class -->
                  <v-btn
                      icon
                      large
                      dark
                      v-for="(btn, index) in loginMethod" :key="btn.id"
                      :class='[btn.color, index!==0 ? "ml-6" : ""]'
                  >
                    <v-icon>{{ btn.icon }}</v-icon>
                  </v-btn>
                </div>
              </div>
            </v-card>

          </v-window-item>
          <!-- 注册窗口 -->
          <v-window-item value="register">
            <v-card height="560" width="500" tile class="pa-16">
              <div class="d-flex justify-space-between pa-2">
                <h2>注册</h2>
                <div class="text-caption mt-2">
                  已有账号?&nbsp;&nbsp;<a @click="switchWindow('login')">点击登录</a>
                </div>
              </div>
              <div>
                <v-form
                    class="pa-2"
                    ref="registerForm"
                    v-model="validRegister"
                    lazy-validation
                >
                  <v-text-field
                      dense
                      outlined
                      required
                      v-model="registerInfo.email"
                      :rules="rules.email"
                      label="邮箱名"
                      placeholder="邮箱名"
                  ></v-text-field>

                  <v-row>
                    <v-col>
                      <v-text-field
                          dense
                          outlined
                          required
                          v-model="registerInfo.verifyCode"
                          :rules="rules.verifyCode"
                          label="验证码"
                          placeholder="请输入验证码"
                      />
                    </v-col>
                    <v-col>
                      <v-btn
                          block
                          class="info"
                          :disabled="verifyInfo.isDisabled"
                          @click="getVerifyCode"
                      >
                        {{ verifyInfo.text }}
                      </v-btn>
                    </v-col>
                  </v-row>

                  <v-checkbox
                      dense
                      v-model="registerInfo.isCheck"
                      :rules="rules.isCheck"
                      label="同意本公司的条款与协议"
                      required
                  ></v-checkbox>

                  <v-btn
                      dense
                      block
                      :disabled="!validRegister"
                      color="info"
                      @click="validateRegister"
                  >
                    注册
                  </v-btn>
                </v-form>
              </div>
            </v-card>

          </v-window-item>
          <!-- 注册成功窗口 -->
          <v-window-item value="registerSuccess">
            <v-card height="560" width="500" tile class="d-flex align-center">
              <v-container class="text-center">
                <v-icon size="120" color="success">mdi-checkbox-marked-circle</v-icon>
                <h3 class="mt-3">欢迎加入知否大家庭</h3>
                <p class="text-caption grey--text mt-3">请前往注册的邮箱，查看账号信息，<a @click="switchWindow('login')">可点击此处前往登录</a></p>
              </v-container>
            </v-card>
          </v-window-item>
        </v-window>
      </v-card>
    </v-container>
  </v-dialog>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "LoginRegisterDialog",
  data() {
    return {
      isShowPassword: true,
      valid: true,
      validRegister: true,
      window: 'login',
      recommendAuthor: {
        head_pic: '',
        nickname: '',
        canvases: ''
      },
      loginInfo: {
        username: '',
        password: '',
        isCheck: false
      },
      rules: {
        username: [val => !!val || '用户名不能为空'],
        password: [val => !!val || '密码不能为空'],
        email: [
          val => !!val || '邮箱不能为空',
          val => !!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val) || '请输入正确的邮箱'
        ],
        verifyCode: [val => !!val || '验证码不能为空'],
        isCheck: [v => !!v || '必须同意才能登录']
      },
      registerInfo: {
        email: '',
        verifyCode: '',
        isCheck: false
      },
      loginMethod: [],
      verifyInfo: {
        isDisabled: false,
        text: '获取验证码',
        time: 20,
        verifyInterval: null
      }
    }
  },
  methods: {
    getRecommendAuthor() {
      this.recommendAuthor = {
        head_pic: 'https://s3.bmp.ovh/imgs/2022/07/26/c4e01ef122e4cbc9.jpg', // 头像
        nickname: '闲云野鹤', // 昵称
        canvases:
            '编程是爱好，恭喜你发现宝藏男孩一枚~希望你们关注我是因为喜欢我，嘿嘿！<br>' +
            '私人微信：xianyunyehe 备注来意<br>' +
            '公众号：闲云野鹤' // 个性签名
      }
    },
    closeDialog() {
      this.$store.commit('blog/loginSwitch', false)
      //关闭对话框时清空表单验证信息
      this.valid = true
      this.validRegister = true
      if (this.window === 'register') {
        this.$refs.registerForm.reset()
      } else if (this.window === 'login') {
        this.$refs.loginForm.reset()
      }

      //如果存在获取验证码定时器则清除
      if(this.verifyInfo.verifyInterval) {
        this.clearInterval()
      }

      //切回到登录窗口
      this.window = 'login'
    },

    validateRegister() {
      this.valid = this.$refs.registerForm.validate()
      if(this.valid) {
        //请求注册接口
        //跳转到注册成功页面
        this.switchWindow('registerSuccess')
      }
    },
    validateLogin() {
      this.valid = this.$refs.loginForm.validate()
    },
    togglePassword() {
      this.isShowPassword = !this.isShowPassword
    },
    getLoginMethod() {
      this.loginMethod = [
        {id: 1, name: 'QQ', icon: 'mdi-qqchat', color: 'info', to: ''},
        {id: 2, name: '微信', icon: 'mdi-wechat', color: 'success', to: ''},
        {id: 3, name: '微博', icon: 'mdi-sina-weibo', color: 'error', to: ''}
      ]
    },
    switchWindow(pageName) {
      //切换窗口时清空表单验证信息
      if (pageName === 'register') {
        this.$refs.loginForm.reset()
      } else if (pageName === 'login') {
        this.$refs.registerForm.reset()
      }

      //如果存在获取验证码定时器则清除
      if(this.verifyInfo.verifyInterval) {
        this.clearInterval()
      }

      this.valid = true
      this.validRegister = true
      this.window = pageName
    },
    clearInterval() {
      this.verifyInfo.time = 60
      this.verifyInfo.isDisabled = false
      this.verifyInfo.text = '获取验证码'
      window.clearInterval(this.verifyInfo.verifyInterval)
    },
    getVerifyCode() {
      this.verifyInfo.isDisabled = true
      this.verifyInfo.verifyInterval = window.setInterval(() => {
        if(this.verifyInfo.time === 0) {
          this.clearInterval()
        }else {
          this.verifyInfo.text = `剩余${this.verifyInfo.time--}秒`
        }
      }, 1000)
    }
  },
  computed: {
    ...mapState('blog', ['loginSwitch'])
  },
  created() {
    this.getRecommendAuthor()
    this.getLoginMethod()
  }
}
</script>

<style lang="less" scoped>

.dialog_back {
  background-image: linear-gradient(to bottom, #3a485a, #607089);
}

.closeBtn {
  top: 10px;
  right: -22px;
  z-index: 999;
  background-color: #FFF;
}
</style>
